<template>
  <div ref="chartRef" style="width: 100%; height: 300px"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, onUnmounted, useTemplateRef } from "vue";

const chartRef = useTemplateRef("chartRef");
let myChart = null;
const initChart = () => {
  myChart = echarts.init(chartRef.value);
  const options = {
    radar: {
      // shape: "circle",
      indicator: [
        // 指示器
        { name: "指标1", max: 6500 },
        { name: "指标2", max: 16000 },
        { name: "指标3", max: 30000 },
        { name: "指标4", max: 38000 },
        { name: "指标5", max: 52000 },
        { name: "指标6", max: 25000 },
      ],
      radius: 120,
      startAngle: 180, // 起始角度
      splitNumber: 8, // 分割的段数
      axisName: {
        color: "#fff",
      },
      // 分割区域
      splitArea: {
        areaStyle: {
          color: ["red", "blue"],
        },
      },
    },
    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: "Allocated Budget",
            areaStyle: {
              // 数据区域的颜色
              color: "rgba(255, 0,0,.5)",
            },
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: "Actual Spending",
          },
        ],
      },
    ],
  };

  myChart.setOption(options);
};

const handleResize = () => {
  myChart.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  myChart.dispose();
});
</script>

<style scoped></style>
